@using AntDesign.Charts
@using Title = AntDesign.Charts.Title

<Tabs>
    <TabPane Key="1">
        <Tab>示例1</Tab>
        <ChildContent>
            <StackedBar Data="data1" Config="config1"/>
        </ChildContent>
    </TabPane>
    <TabPane Key="2">
        <Tab>示例2</Tab>
        <ChildContent>
            <StackedBar Data="data2" Config="config2"/>
        </ChildContent>
    </TabPane>
</Tabs>


@code {

    #region 示例1

    readonly object[] data1 =
    {
        new {地区 = "华东", 细分 = "公司", 销售额 = 1454715.807999998},
        new {地区 = "华东", 细分 = "消费者", 销售额 = 2287358.261999998},
        new {地区 = "中南", 细分 = "公司", 销售额 = 1335665.3239999984},
        new
        {
            地区 = "中南",
            细分 = "消费者",
            销售额 = 2057936.7620000008
        },
        new
        {
            地区 = "东北",
            细分 = "公司",
            销售额 = 834842.827
        },
        new
        {
            地区 = "东北",
            细分 = "消费者",
            销售额 = 1323985.6069999991
        },
        new
        {
            地区 = "华北",
            细分 = "公司",
            销售额 = 804769.4689999995
        },
        new
        {
            地区 = "华北",
            细分 = "消费者",
            销售额 = 1220430.5610000012
        },
        new
        {
            地区 = "西南",
            细分 = "公司",
            销售额 = 469341.684
        },
        new
        {
            地区 = "西南",
            细分 = "消费者",
            销售额 = 677302.8919999995
        },
        new
        {
            地区 = "西北",
            细分 = "公司",
            销售额 = 253458.1840000001
        },
        new
        {
            地区 = "西北",
            细分 = "消费者",
            销售额 = 458058.1039999998
        }
    };

    readonly StackedBarConfig config1 = new StackedBarConfig
    {
        ForceFit = true,
        Title = new Title
        {
            Visible = true,
            Text = "百分比堆叠条形图"
        },
        YField = "地区",
        XField = "销售额",
        Label = new BarViewConfigLabel
        {
            Visible = true
        },
        StackField = "细分"
    };

    #endregion 示例1

    #region 示例2

    readonly object[] data2 =
    {
        new
        {
            地区 = "华东",
            细分 = "公司",
            销售额 = 1454715.807999998
        },
        new
        {
            地区 = "华东",
            细分 = "消费者",
            销售额 = 2287358.261999998
        },
        new
        {
            地区 = "华东",
            细分 = "小型企业",
            销售额 = 942432.3720000006
        },
        new
        {
            地区 = "中南",
            细分 = "公司",
            销售额 = 1335665.3239999984
        },
        new
        {
            地区 = "中南",
            细分 = "消费者",
            销售额 = 2057936.7620000008
        },
        new
        {
            地区 = "中南",
            细分 = "小型企业",
            销售额 = 743813.0069999992
        },
        new
        {
            地区 = "东北",
            细分 = "公司",
            销售额 = 834842.827
        },
        new
        {
            地区 = "东北",
            细分 = "消费者",
            销售额 = 1323985.6069999991
        },
        new
        {
            地区 = "东北",
            细分 = "小型企业",
            销售额 = 522739.0349999995
        },
        new
        {
            地区 = "华北",
            细分 = "公司",
            销售额 = 804769.4689999995
        },
        new
        {
            地区 = "华北",
            细分 = "消费者",
            销售额 = 1220430.5610000012
        },
        new
        {
            地区 = "华北",
            细分 = "小型企业",
            销售额 = 422100.9870000001
        },
        new
        {
            地区 = "西南",
            细分 = "公司",
            销售额 = 469341.684
        },
        new
        {
            地区 = "西南",
            细分 = "消费者",
            销售额 = 677302.8919999995
        },
        new
        {
            地区 = "西南",
            细分 = "小型企业",
            销售额 = 156479.9319999999
        },
        new
        {
            地区 = "西北",
            细分 = "公司",
            销售额 = 253458.1840000001
        },
        new
        {
            地区 = "西北",
            细分 = "消费者",
            销售额 = 458058.1039999998
        },
        new
        {
            地区 = "西北",
            细分 = "小型企业",
            销售额 = 103523.308
        }
    };

    readonly StackedBarConfig config2 = new StackedBarConfig
    {
        ForceFit = true,
        Title = new Title
        {
            Visible = true,
            Text = "堆叠条形图：label自动隐藏"
        },
        Description = new Description
        {
            Visible = true,
            Text = "在堆叠条形图中，如果label的位置被设定为middle，即显示在条形中间。在对应形状大小不够摆放label的情况下，label会被自动隐藏。"
        },
        YField = "地区",
        XField = "销售额",
        StackField = "细分",
        Label = new BarViewConfigLabel
        {
            Offset = 0,
            Visible = true,
            Position = "middle"
        }
    };

    #endregion 示例2

}